<template>
  <div class="app-container">
    <p class="welcome" v-judge-account="0">欢迎回来，{{nickName}}</p>
    <p class="welcome" v-judge-account="1">欢迎回来，{{firmName}}</p>
    <h3 class="marginBottom10" v-hasPermi="['assurance:report:approval']">
      <i class="iconfont icondaibanshixiang fontSize26 marginRight10"></i>待办事项
    </h3>
    <div style="overflow: hidden;display: flex;align-items: center;justify-content: flex-start; padding-left: 30px;">

      <el-col :span="4"  style="margin: 0 10px;"v-hasPermi="['office:contact-approval']" >
        <el-card class="box-card" style="border-top: 4px solid #4ab7bd;">
          <div slot="header" class="clearfix" style="min-height: 46px;">
            <h3 style="text-align: center">
              {{approvalCount.officePhoneCount}} 条联系人修改申请
            </h3>
          </div>
          <div class="component-item" style="text-align: center">
            <router-link class="pan-btn tiffany-btn" :to="{path:'/office/contact-approval',query: {status: 1}}" style="padding:10px 36px;">查看详细</router-link>
          </div>
        </el-card>
      </el-col>

      <el-col :span="4"  style="margin: 0 10px;" v-hasPermi="['office:examine:list']">
        <el-card class="box-card" style="border-top: 4px solid #4ab7bd;">
          <div slot="header" class="clearfix" style="min-height: 46px;">
            <h3 style="text-align: center">
              {{approvalCount.OfficeCount}} 条外省事务所申请
            </h3>
          </div>
          <div class="component-item" style="text-align: center">
            <router-link class="pan-btn tiffany-btn" to="/office/examine" style="padding:10px 36px;">查看详细</router-link>
          </div>
        </el-card>
      </el-col>

      <el-col :span="4" style="margin: 0 10px;" v-hasPermi="['assurance:return:approve']">
        <el-card class="box-card" style="border-top: 4px solid #4ab7bd;">
          <div slot="header" class="clearfix" style="min-height: 46px;">
            <h3 style="text-align: center">
              {{approvalCount.approvalCount}} 条申请财政系统数据退回申请
            </h3>
          </div>
          <div class="component-item" style="text-align: center">
            <router-link class="pan-btn tiffany-btn" to="/assurance/approveList" style="padding:10px 36px;">查看详细</router-link>
          </div>
        </el-card>
      </el-col>

      <el-col :span="4" style="margin: 0 10px;" v-hasPermi="['assurance:data:approve']">
        <el-card class="box-card" style="border-top: 4px solid #e65d6e;">
          <div slot="header" class="clearfix" style="min-height: 46px;">
            <h3 style="text-align: center">
              {{approvalCount.ApprovalOfficeCount}} 条业务数据待审核
            </h3>
          </div>
          <div class="component-item" style="text-align: center">
            <router-link class="pan-btn pink-btn" :to="{path:'/assurance/list',query: {dataStatus: 6}}" style="padding:10px 36px;">查看详细</router-link>
          </div>
        </el-card>
      </el-col>

      <el-col :span="4" style="margin: 0 10px;">
        <el-card class="box-card" style="border-top: 4px solid #c03639;" v-hasPermi="['assurance:business:contrast']">
          <div slot="header" class="clearfix" style="min-height: 46px;">
            <h3 style="text-align: center">
              {{approvalCount.approvalReportCount}} 条业务数据待确认
            </h3>
          </div>
          <div class="component-item" style="text-align: center">
            <router-link class="pan-btn red-btn" :to="{path:'/assurance/list',query: {dataStatus: 9}}" style="padding:10px 36px;">查看详细</router-link>
          </div>
        </el-card>
      </el-col>


      <el-col :span="4" style="margin: 0 10px;">
        <el-card class="box-card" style="border-top: 4px solid #c03639;" v-judge-account="1">
          <div slot="header" class="clearfix" style="min-height: 46px;">
            <h3 style="text-align: center">
              {{approvalCount.applyContractCount}} 条联系人修改申请
            </h3>
          </div>
          <div class="component-item" style="text-align: center">
            <router-link class="pan-btn tiffany-btn" :to="{path:'/office/contact-approval',query: {officeId: -1}}" style="padding:10px 36px;">查看详细</router-link>
          </div>
        </el-card>
      </el-col>
    </div>


<!--    <div class="tableBox">-->
<!--      <el-table-->
<!--        :data="dataList"-->
<!--        v-hasPermi="['assurance:report:approval']"-->
<!--      >-->
<!--        <el-table-column type="index" width="55" align="center"/>-->
<!--        <el-table-column label="报告文号" prop="reportNo" sortable/>-->
<!--        <el-table-column label="事务所名称" prop="firmName"/>-->
<!--        <el-table-column label="报备状态" prop="reportStatus"/>-->
<!--        <el-table-column label="退回理由" prop="reason"/>-->
<!--        <el-table-column label="数据状态" prop="dataStatus">-->
<!--          <template slot-scope="scope">-->
<!--            <span v-if="scope.row.dataStatus == 2">数据异常</span>-->
<!--            <span v-if="scope.row.dataStatus == 6">待审核</span>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column label="操作" width="300px">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button type="primary" plain size="mini" v-if="scope.row.applyForFinancialRefund == 1"-->
<!--                       @click="handleExamine(scope.row,'同意',2)">同意退回-->
<!--            </el-button>-->
<!--            <el-button type="primary" plain size="mini" v-if="scope.row.applyForFinancialRefund == 1"-->
<!--                       @click="handleExamine(scope.row,'拒绝',-2)">拒绝退回-->
<!--            </el-button>-->
<!--            &lt;!&ndash; <el-button type="primary" plain size="mini" v-if="scope.row.dataStatus == 6"-->
<!--                        @click.native="handleApproveExamine(scope.row)" v-hasPermi="['assurance:data:approve']">审核-->
<!--             </el-button>&ndash;&gt;-->
<!--            <el-button type="primary" plain size="mini"-->
<!--                       @click.native="clickBant(scope.row.businessId)">查看-->
<!--            </el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
<!--      <pagination v-show="manageReporttotal>0" :total="manageReporttotal" :page.sync="queryTodoParams.pageNum"-->
<!--                  :limit.sync="queryTodoParams.pageSize" @pagination="getTodoList" :pageSizes="initPageSizes5"/>-->
<!--    </div>-->
<!--    <div class="tableBox">-->
<!--      <el-table-->
<!--        :data="officedataList"-->
<!--        v-hasPermi="['assurance:report:approval']"-->
<!--      >-->
<!--        <el-table-column fixed label="事务所名称" prop="firmName" :show-overflow-tooltip="true" :render-header="foo"/>-->
<!--        <el-table-column label="事务所执业证书编号" prop="practiceCertificateNo" :show-overflow-tooltip="true"-->
<!--                         :render-header="foo"/>-->
<!--        <el-table-column label="统一社会信用代码" prop="unifiedSocialCreditCode" :show-overflow-tooltip="true"-->
<!--                         :render-header="foo"/>-->
<!--        <el-table-column label="所属省份" prop="province" :render-header="foo"/>-->
<!--        <el-table-column label="通讯地址" prop="mailingAddress" :show-overflow-tooltip="true" :render-header="foo"/>-->
<!--        <el-table-column label="联系人" prop="contacts" :render-header="foo"/>-->
<!--        <el-table-column label="联系人手机号" prop="phoneNumberOfContactPerson" :show-overflow-tooltip="true"-->
<!--                         :render-header="foo"/>-->
<!--        <el-table-column label="社会信用代码证" prop="accountantCertificateFile" width="170" :render-header="foo">-->
<!--          <template slot-scope="scope">-->
<!--            <el-image style="width: 50px; height: 50px"-->
<!--                      :src="picturePrefix + scope.row.accountantCertificateFile"-->
<!--                      :preview-src-list="[picturePrefix + scope.row.accountantCertificateFile]" alt="">-->
<!--              <div slot="error" class="image-slot">-->
<!--                <i class="el-icon-picture-outline"></i>-->
<!--              </div>-->
<!--            </el-image>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="事务所执业证书" prop="practiceCertificateFile" width="150" :render-header="foo">-->
<!--          <template slot-scope="scope">-->
<!--            <el-image style="width: 50px; height: 50px"-->
<!--                      :src="picturePrefix + scope.row.practiceCertificateFile"-->
<!--                      :preview-src-list="[picturePrefix + scope.row.practiceCertificateFile]" alt="">-->
<!--              <div slot="error" class="image-slot">-->
<!--                <i class="el-icon-picture-outline"></i>-->
<!--              </div>-->
<!--            </el-image>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        &lt;!&ndash;   '0：待审核，1：审核通过，-2：审核不通过，2：无需审核',&ndash;&gt;-->
<!--        <el-table-column label="审核状态" prop="auditStatus" :render-header="foo">-->
<!--          <template slot-scope="scope">-->
<!--            <el-tag-->
<!--              :type="scope.row.auditStatus && scope.row.auditStatus === -2 ? 'danger': 'success'"-->
<!--              disable-transitions>{{formatterAuditStatus(scope.row)}}-->
<!--            </el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column label="操作" fixed="right" width="160">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button type="primary" plain size="mini"-->
<!--                       @click.native="clickOfficeBant(scope.row)">查看-->
<!--            </el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--      </el-table>-->
<!--      <pagination v-show="manageOfficetotal>0" :total="manageOfficetotal" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />-->
<!--    </div>-->
<!--    <div class="tableBox">-->
<!--      <el-table-->
<!--        :data="contactDataList"-->
<!--        v-hasPermi="['assurance:report:approval']"-->
<!--      >-->
<!--        <el-table-column  fixed label="事务所编号" prop="office_number" />-->
<!--        <el-table-column fixed label="事务所名称" prop="firm_name" :show-overflow-tooltip="true" width="150" />-->
<!--        <el-table-column label="新联系人名称" prop="new_contacts" :show-overflow-tooltip="true" width="150" />-->
<!--        <el-table-column  label="旧联系人名称" prop="old_contacts" />-->
<!--        <el-table-column  label="新联系电话" prop="new_contact_number" />-->
<!--        <el-table-column  label="旧联系电话" prop="old_contact_number" />-->
<!--        <el-table-column  label="新联系手机号" prop="new_contact_mobile" />-->
<!--        <el-table-column  label="旧联系手机号" prop="old_contact_mobile" />-->
<!--        <el-table-column  label="申请人姓名" prop="applicant_name" />-->
<!--        <el-table-column  label="申请时间" prop="apply_time" width="200" >-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{ parseTime(scope.row.apply_time,'{y}-{m}-{d}') }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column  label="状态" prop="status">-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{ resvoleStatus(scope.row.status) }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column  label="操作" fixed="right" width="200">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button type="primary" plain size="mini"-->
<!--                       @click.native="clickContactBant(scope.row)">查看-->
<!--            </el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
<!--      <pagination v-show="manageContacttotal>0" :total="manageContacttotal" :page.sync="queryContactParams.pageNum"-->
<!--                  :limit.sync="queryContactParams.pageSize" @pagination="getContactList"/>-->
<!--    </div>-->
    <h3 class="marginTop30 marginBottom20"><i class="iconfont iconxiaoxi fontSize20 marginRight10"></i>未读消息</h3>
    <div style="overflow: hidden;display: flex;align-items: center;justify-content: flex-start;padding-left: 30px;">
      <el-col :span="4"  style="margin: 0 10px;">
        <el-card class="box-card" style="border-top: 4px solid #4ab7bd;">
          <div slot="header" class="clearfix" style="min-height: 46px;">
            <h3 style="text-align: center">
              {{massageList.length}} 条未读消息
            </h3>
          </div>
          <div class="component-item" style="text-align: center">
            <router-link class="pan-btn tiffany-btn" :to="{path:'/notice',query: {status: 0}}" style="padding:10px 36px;">查看详细</router-link>
          </div>
        </el-card>
      </el-col>
    </div>
<!--    <div class="tableBox">-->
<!--      <el-table-->
<!--        ref="myTable"-->
<!--        :data="massageList"-->
<!--        max-height="350"-->
<!--      >-->
<!--        <el-table-column type="index" width="55" align="center"/>-->
<!--        <el-table-column label="标题" prop="noticeTitle"/>-->
<!--        <el-table-column label="消息内容" prop="noticeContent"/>-->
<!--        <el-table-column label="消息类型" prop="noticeType" :formatter="formatterNoticeType"/>-->
<!--        <el-table-column label="来自" prop="createBy"/>-->
<!--        <el-table-column label="时间" prop="createTime"/>-->
<!--        <el-table-column label="操作" width="100">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button size="mini" @click="handleOpenDetail(scope.row.noticeId)">查看</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
<!--    </div>-->

    <h3 class="marginTop30" v-hasPermi="['manage:business:report']">报表</h3>
    <div class="flex-box">
      <el-card
        v-for="(item,index) in reportFormOptions"
        :key="index"
        class="borderCard"
        @click.native="handleToReportForm(item.value)" v-hasPermi="['manage:business:report']">
        <p class="marginBottom20">
          <i class="iconfont iconbaobiao fontSize20 marginRight10"></i>
          <span class="fontWeight500">{{ item.value }}</span>
        </p>
        <p class="link">点击查看 →</p>
      </el-card>
    </div>
    <!-- 待审核事务所数据 -->
    <el-dialog
      title="审核"
      :visible.sync="examineDataVisible"
      width="360px"
      :close-on-click-modal="false"
      append-to-body
      center
    >
      <el-form :model="commonForm" :rules="commonFormRules" ref="commonForm">
        <el-form-item prop="reason">
          <el-input v-model="commonForm.reason" type="textarea" :rows="8" placeholder="请输入理由..."></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleApproveSubmitExamine('7')">通过</el-button>
        <el-button type="danger" @click="handleApproveSubmitExamine('8')">拒绝</el-button>
        <el-button @click="examineDataVisible=false;">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 提示框-->
    <el-dialog
      title="消息详情"
      :visible.sync="dialogVisible"
      width="700px"
      :before-close="handleClose"
      append-to-body
    >
      <div>
        <ul class="ulView">
          <li><p>标题</p>
            <p>{{dataInfo.noticeTitle}}</p></li>
          <li><p>消息内容</p>
            <p>{{dataInfo.noticeContent}}</p></li>
          <li><p>消息类型</p>
            <p>{{dataInfo.noticeType === "2" ? '公告':'个人消息'}}</p></li>
          <li><p>来自</p>
            <p>{{dataInfo.createBy}}</p></li>
          <li><p>时间</p>
            <p>{{dataInfo.createTime}}</p></li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getPassList, getAssurancePass,approvalCount} from '@/api/system/assurance'
  import {getNotice, listNotice, readNotice} from "@/api/system/notice";
  import {examineBusinessDataPass} from "@/api/system/assurance";
  import {listAuditOffice, checkOffice} from "@/api/system/office";
  import { contractList} from "@/api/system/contracts";
  export default {
    name: 'Index',
    data() {
      return {
        initPageSizes5:[2],
        dialogVisible: false,
        approvalCount:{},
        picturePrefix: process.env.VUE_APP_NGINX_STATIC_RESOURCE_MAPPING_URL, // 图片前缀
        dataList: [],
        manageReporttotal: 0,
        officedataList: [],
        // 管理待办事项总条数
        manageOfficetotal: 0,
        manageContacttotal:0,
        contactDataList:[],
        massageList: [], // 消息列表
        dataInfo: {}, // 消息详情
        total: '',
        nickName: this.$store.getters.userInfo.nickName,
        firmName: this.$store.getters.userInfo.firmName,
        // 查询待办事项参数
        queryTodoParams: {
          pageNum: 1,
          pageSize: 2,
          applyForFinancialRefund: undefined,
        },
        queryParams: {
          pageNum: 1,
          pageSize: 2
        },
        queryContactParams:{
          status:1,
          pageNum: 1,
          pageSize: 2,
        },
        // 查询 未读消息参数
        queryUnreadMessageParams: {
          isRead: 0, // 未读状态
          pageSize: 5
        },
        // 8种报表
        reportFormOptions: [
          {
            value: '报备情况-按所统计',
            label: '报备情况-按所统计'
          }, {
            value: '报备情况-按CPA统计',
            label: '报备情况-按CPA统计'
          }, {
            value: '财报意见类型-按所',
            label: '财报意见类型-按所'
          }, {
            value: '财报意见类型-按CPA',
            label: '财报意见类型-按CPA'
          }, {
            value: '验资业务-按所',
            label: '验资业务-按所'
          }, {
            value: '验资业务-按CPA',
            label: '验资业务-按CPA'
          }, {
            value: '更换事务所统计',
            label: '更换事务所统计'
          }, {
            value: '根据注师会总报告-报告数量畸多',
            label: '根据注师会总报告-报告数量畸多'
          }
        ],
        examineDataVisible: false,
        commonForm: {},// 审批表单
        commonFormRules: {
          reason: [
            {required: true, trigger: "blur", message: "理由不能为空"},
          ],
        },
      }
    },
    created() {
     /* this.getTodoList();  // 获取代办事项： 管理员 退回通不通过
      this.getList();
      this.getContactList();*/
     this.getApprovalCount();//获取待办事项
      this.getMessageList(); // 获取未读消息
    },
    methods: {
      /** 获取待办事项业务报告列表 */
      async getApprovalCount() {
        const res = await approvalCount();
        this.approvalCount = res.data;
      },

    /*  /!** 获取待办事项业务报告列表 *!/
      async getTodoList() {
        const res = await getPassList(this.queryTodoParams);
        this.dataList = res.rows;
        this.manageReporttotal = res.total
      },

      /!** 查询待办事项待审核事务所列表 *!/
      getList() {
        let obj = JSON.stringify(this.queryParams);
        let init = JSON.parse(obj);
        init.auditStatus = 0
        listAuditOffice(init).then(
          response => {
            this.officedataList = response.rows;
            this.manageOfficetotal = response.total;
          }
        );
      },
      /!** 查询待办事项联系人修改申请列表 *!/
      getContactList() {
        let obj = JSON.stringify(this.queryContactParams);
        let init = JSON.parse(obj);
        contractList(init).then(
          response => {
            this.contactDataList = response.rows;
            this.manageContacttotal = response.total;
          }
        );
      },*/
      /** 获取未读消息列表 */
      async getMessageList() {
        this.loading = true;
        this.queryUnreadMessageParams.informedPersonId = this.$store.getters.userInfo.userId; //  管理员不需要传informedPersonId
        const response = await listNotice(this.queryUnreadMessageParams)
        this.massageList = response.rows;
        this.total = response.total;
        this.loading = false;
      },
      foo(h,{column}) {
        return this.utilsFoo(h,{column})
      },
      //表单格式化
      formatterNoticeType(row, column) {
        return row.noticeType === "2" ? '公告' : '个人消息';
      },
      handleOpenDetail(noticeId) {
        this.dialogVisible = true;
        this.getNoticeInfo(noticeId)
      },
      handleClose() {
        this.dialogVisible = false;
        this.getMessageList()
      },
      // 获取消息详情
      async getNoticeInfo(id) {
        const response = await getNotice(id);
        this.dataInfo = response.data;
        // 标记为已读
        this.readData(id);
        this.getMessageList();
      },
      // 标记为已读
      readData(id) {
        let params = {
          noticeId: id
        }
        readNotice(params).then(() => {
        });
      },
      handleRouter(path) {
        this.$router.push({path: path})
      },
      handleToReportForm(type) {
        this.$router.push({path: '/sicpa-manage/report-forms', query: {type: type}})
      },
    /*  handleExamine(row, param, num) {
        this.$prompt('理由', `${param}退回原因`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputErrorMessage: `请输入${param}退回原因`,
          inputPattern: /\S/,
        }).then(({value}) => {
          // applyForFinancialRefund: 2：财政退回通过，-2：财政退回不通过
          let params = {
            applyForFinancialRefund: num,
            businessId: row.businessId,
            reason: value
          }
          getAssurancePass(params).then(
            response => {
              this.$message({
                type: 'success',
                message: `${param}成功`
              });
              this.getTodoList()
            }
          ).catch(() => {
            this.$message({
              type: 'info',
              message: `取消操作`
            });
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消审批'
          });
        });
      },*/
      /** 审核 打开弹框 待审核事务所数据*/
      handleApproveExamine(row) {
        this.examineDataVisible = true
        this.commonForm = {};
        this.commonForm.businessId = row.businessId;
        if (this.$refs.commonForm) {
          this.$refs.commonForm.clearValidate(['reason']); // 清空单一校验
        }
      },
      /** 审核 提交 待审核事务所数据*/
      handleApproveSubmitExamine(status) {
        let params = {
          businessId: this.commonForm.businessId,
          dataStatus: status,
          optReason: this.commonForm.reason
        };
        this.$refs.commonForm.validate(valid => {
          if (valid) {
            this.$confirm('是否确认' + (status === '7' ? '通过' : '拒绝') + '该条待审核事务所数据申请?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(response => {
              examineBusinessDataPass(params).then(res => {
                this.examineDataVisible = false;
                this.getTodoList();
                this.$message({
                  message: '操作成功!',
                  type: 'success'
                });
              });
            }).catch(function () {
            });
          }
        })
      },
      clickBant(num) {
        this.$router.push({path: '/assurance/list', query: {numb: num}})
      },
      clickOfficeBant(row) {
        this.$router.push({path: '/office/examine', query: {practiceCertificateNo: row.practiceCertificateNo}})
      },
      clickContactBant(row){
        this.$router.push({path: '/office/contact-approval', query: {applyId: row.apply_id}})
      },
      formatterAuditStatus(row) {
        return row.auditStatus == '-2' ? '拒绝' : row.auditStatus == '1' ? '通过' : row.auditStatus == '2' ? '无需审核' : '待审核';
      },
      resvoleStatus(status){
        switch (status) {
          case 1:
            return '审批中';
          case 2:
            return '通过';
          case -2:
            return '不通过';
          default:
            return '';
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-container {
    padding: 0 10px;

    .welcome {
      position: absolute;
      right: 10px;
      padding: 0 20px;
      color: rgb(105, 113, 139);
    }

    h3 {
      margin-left: 15px;
      margin-right: 15px;
      color: rgb(105, 113, 139);
      font-weight: 500;
    }

    .card {
      position: relative;
      margin: 20px;
      width: 380px;
      height: 124px;
      border-color: transparent;
      border-width: 0 0 0 5px;
      color: #fff;

      ul {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        li {
          margin: 10px 30px 0 0;
          cursor: pointer;
        }
      }

      .num {
        position: absolute;
        right: 10px;
        top: 10px;
        display: block;
        width: 30px;
        height: 30px;
        line-height: 28px;
        border-radius: 50%;
        background: red;
        border: 1px solid #fff;
        text-align: center;
        color: #fff;
      }
    }

    .card + .card {
      margin-left: 0;
    }

    .greenCard {
      border-color: #0e7a0d;
      background: #61c8c0;
    }

    .redCard {
      border-color: #eb4f37;
      background: #e37979;
    }

    .yellowCard {
      border-color: #986f0b;
      background: #f4ad54;
    }

    .purpleCard {
      border-color: #6268c1;
      background: #848ae3;

    }

    .blueCard {
      border-color: #15a0e8;
      background: #008fe0;
    }

    .borderCard {
      margin: 20px 40px;
      height: 100px;
      width: 250px;
      border-color: transparent transparent transparent #848ae3;
      border-width: 0 0 0 5px;
      color: #525252;
      cursor: pointer;

      p {
        display: flex;
        align-items: center;
      }

      .link {
        color: #5B8DC3;
        cursor: pointer;
        margin-left: 32px;
      }
    }
  }

  .tableBox {
    margin: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .1);

    ::v-deep .el-table .el-table__header-wrapper th {
      background-color: #fff;
    }
  }

  .ulView {
    li {
      display: flex;
      border: 1px solid #dfe6ec;

      p {
        display: inline-block;
        padding: 10px 15px;
        line-height: 26px;
      }

      p:first-child {
        flex: 1;
        border-right: 1px solid #dfe6ec;
        font-weight: 500;
      }

      p:last-child {
        flex: 5;
      }

    }

    li + li {
      border-top: none;
    }
  }

  .flex-box {
    display: flex;
    flex-wrap: wrap;

  }

  :v-deep .el-dialog .el-dialog__body {
    min-height: 186px;
  }

</style>
